@import "@wordpress/base-styles/breakpoints";
@import "@wordpress/base-styles/mixins";
@import "@automattic/typography/styles/fonts";

.select-items {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-top: -12px;
	margin-bottom: 16px;
	padding-left: 40px;

	@include break-small {
		margin-bottom: 40px;
		padding-left: 60px;
	}
}

.select-items__item {
	display: flex;
	align-items: flex-start;
	position: relative;
	padding: 24px 0;

	p {
		margin: 0;
	}

	@include break-small {
		width: 342px;
	}

	@include break-medium {
		width: 456px;
	}

	&-icon {
		position: absolute;
		top: 24px;
		left: -40px;
		@include break-small {
			left: -48px;
		}
	}

	&-info-wrapper {
		@include break-mobile {
			display: flex;
			align-items: flex-start;
			width: 100%;
		}
	}

	&-info {
		flex: 1;

		@include break-mobile {
			padding-right: 20px;
		}
	}

	&-title {
		margin-bottom: 8px;
		font-size: $font-title-small;
		font-weight: 400;
		line-height: 1.2;
		color: #101517;
	}

	&-description {
		font-size: $font-body-small;
		color: var(--studio-gray-50);

		> p:last-child {
			margin-bottom: 0;
		}
	}

	.select-items__item-button {
		margin-top: 24px;
		border-radius: 4px;
		min-width: 130px;
		background-color: var(--color-surface);
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
		border: 1px solid rgb(195, 196, 199);
		color: #101517;
		font-weight: 500;

		@include break-mobile {
			margin-top: 0;
		}
	}

	& + & {
		border-top: 1px solid rgba(220, 220, 222, 0.64);
	}
}
